<template>
  <div class="box">
    <div class="left">
      <div class="search">
        <el-input
          prefix-icon="Search"
          v-model="data.search"
          placeholder="搜索工序组件"
          clearable
        >
        </el-input>
      </div>
      <div class="bottom">
        <div class="group" v-for="(group, k) in data.groupList" :key="k">
          <div class="group-title">{{ group.title }}</div>
          <div class="item-box">
            <div class="item" v-for="(item, index) in group.list" :key="index">
              <el-image class="icon" :src="item.icon" fit="cover" />
              <div class="title">{{ item.title }}</div>
              <div class="dec">{{ item.dec }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <el-button type="primary" :icon="Search">保存</el-button>
        <el-button icon="RefreshLeft">撤销</el-button>
        <el-button icon="RefreshRight">重做</el-button>
        <el-button icon="Minus" />

        <div class="percentage">100%</div>
        <el-button icon="Plus" />
        <el-button :icon="Search">左对齐</el-button>
        <el-button :icon="Search">居中对齐</el-button>
        <el-button :icon="Search">右对齐</el-button>
      </div>
      <div class="bottom">
        <vue-draggable-resizable
          :w="130"
          :h="66"
          :x="50"
          :y="50"
          :min-width="50"
          :min-height="50"
          :parent="true"
          :grid="[10, 10]"
          class-name="dragging1"
          @dragging="onDrag"
          @resizing="onResize"
          class="drag"
        >
          <div class="item">
            <el-image class="icon" :src="icon" fit="cover" />
            <div>机械加工</div>
          </div>
        </vue-draggable-resizable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import machiningIcon from "@/assets/images/machiningIcon.png";
import chemicalTreatmentIcon from "@/assets/images/chemicalTreatmentIcon.png";
import heatTreatmentIcon from "@/assets/images/heatTreatmentIcon.png";
import qualityTestingIcon from "@/assets/images/qualityTestingIcon.png";
import automaticAssemblyIcon from "@/assets/images/automaticAssemblyIcon.png";
import laserProcessingIcon from "@/assets/images/laserProcessingIcon.png";
const data = reactive({
  search: "",
  groupList: [
    {
      title: "基础工序",
      list: [
        {
          icon: machiningIcon,
          title: "机械加工",
          dec: "Input Node",
          type: "input",
        },
        {
          icon: chemicalTreatmentIcon,
          title: "化学处理",
          dec: "Default Node",
          type: "default",
        },
        {
          icon: heatTreatmentIcon,
          title: "热处理",
          dec: "Output Node",
          type: "output",
        },
        {
          icon: qualityTestingIcon,
          title: "质检",
          dec: "品质检测工序",
        },
      ],
    },
    {
      title: "高级工序",
      list: [
        {
          icon: automaticAssemblyIcon,
          title: "自动化装配",
          dec: "机器人自动装配",
        },
        {
          icon: laserProcessingIcon,
          title: "激光加工",
          dec: "精密激光处理",
        },
      ],
    },
  ],
});
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  border: 1px solid #f00;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .left {
    width: 319px;
    height: 100%;
    border-right: 1px solid #e5e7eb;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    .search {
      box-sizing: border-box;
      border-bottom: 1px solid #e5e7eb;
      width: 100%;
      padding: 16px;
    }
    .bottom {
      padding: 16px;
      overflow-y: auto;
      border: 1px solid #f00;
      flex-grow: 1;
      flex-basis: 0;
      .group {
        .group-title {
          font-family: Roboto;
          font-size: 14px;
          font-weight: 500;
          color: #111827;
          margin-bottom: 12px;
          margin-top: 12px;
        }
        .group-title:first-child {
          margin-top: 0;
        }
        .item-box {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          flex-wrap: wrap;
          .item {
            width: 49%;
            padding: 13px;
            background: #ffffff;
            box-sizing: border-box;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
            .icon {
              width: 32px;
              height: 32px;
              margin-bottom: 8px;
            }
            .title {
              font-family: Roboto;
              font-size: 14px;
              font-weight: 500;
              color: #111827;
              margin-bottom: 4px;
            }
            .dec {
              font-family: Roboto;
              font-size: 12px;
              color: #6b7280;
            }
          }
        }
      }
    }
  }
  .right {
    border: 1px solid blue;
    flex-grow: 1;
    flex-basis: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    .top {
      width: 100%;
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
      overflow-x: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .percentage {
        margin: 0 8px;
      }
    }
    .bottom {
      border: 1px solid violet;
      flex-grow: 1;
      flex-basis: 0;
      width: 100%;
      background: #f9fafb;
      .drag {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        .item {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .icon {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #000000;
          }
        }
      }
    }
  }
}
</style>
